<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一章 布局</title>
    <link href="static/css/chater11-1.css" rel="stylesheet">
    <link href="static/css/normalize.css" rel="stylesheet">
    <!-- <link href="static/css/reset.css" rel="stylesheet"> -->
    <!--[if lt IE 9]-->
    <script src="static/js/html5shiv/html5shiv.min.js"></script>
    <!--[endif]-->
</head>
<body>
    <div class="page">
        <header class="masthead" role="banner">
            <p class="logo"><a href=""><img src="static/imgs/cp11/logo.jpg"></a></p>
            <ul class="social-sites">
                <!--社交图片链接-->
                <li><a href="#">微信</a></li>
                <li><a href="#">微博</a></li>
                <li><a href="#">人人网</a></li>
            </ul>
            <nav role="navigation" class="nav-main">
                <!--主导航链接列表-->
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">游记</a></li>
                    <li><a href="#">关于我</a></li>
                </ul>
            </nav>
        </header>

        <div class="container clearfix">
            <main role="main">
                <section class="post">
                    <h1>博客1标题</h1>

                    <img class="img-frame" src="static/imgs/cp11/gettyvilla.jpg" class="post-photo-full">

                    <div class="post-blurb">
                        <p>这个非常难以置信</p>
                    </div>
                    <footer class="footer">
                        <!--博客页脚-->
                        <span>博客页脚1</span>
                    </footer>
                </section>
                <section class="post">
                    <h1>博客2标题</h1>
                    <img src="" class="post-photo-full">
                    <div class="post-blurb">
                        <p>这个可以理解</p>
                    </div>
                    <footer class="footer">
                        <!--博客页脚-->
                        <span>博客页脚2</span>
                    </footer>
                </section>
                <nav role="navigation">
                    <ol class="pagination">
                        <!--链接列表 -->
                    </ol>
                </nav>
            </main>

            <div class="sidebar">
                <article class="about">
                    <h2>关于我</h2>
                </article>
                <div class="mod">
                    <h2>我的游记</h2>
                    <img class="img-frame" src="static/imgs/cp11/about-me.jpg">
                    <!--映射图片-->
                </div>
                <aside class="mod">
                    <h2>最热博文</h2>
                    <ul class="links">

                    </ul>
                </aside>
                <aside class="mod">
                    <h2>最近分享</h2>
                    <ul class="links">

                    </ul>
                </aside>
            </div> <!--结束边栏-->


        </div> <!--结束容器-->

        <footer class="footer" role="contentinfo">
            <p class="legal"><small>&copy; kongfu 2016.12.20 </small></p>
        </footer>
    </div> <!--结束页面-->
</body>
</html>